<template>
    <div class="assy">
        <img src="@/assets/images/anbao/bg_hd.png" alt="">
        <div class="assy-inner">
            <div class="assy-item" v-for="(item,index) in data" :key="index">
                <span class="assy-item-title">{{ item.keyLocations }}<i>{{ item.placeNum }}</i></span>
            </div>
            <!-- <div class="assy-item">
                <span class="assy-item-title">人民大会堂<i>6</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">国家会议中心<i>5</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">雁西湖中心<i>3</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">杭州亚运会<i>2</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">钓鱼台国宾馆<i>1</i></span>
            </div> -->
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    data: {
        required: true,
        type: Array,
        default: []
    }
})
</script>
<style lang='scss' scoped>
.assy{
    position: relative;
    margin: 0px 0 20px 0;
    width: 440px;
    height: 200px;
    img{
        width: 317px;
        height: 90px;
        display: block;
        margin: 70px 0 0 80px;
    }
    .assy-inner{
        width: 440px;
        height: 185px;
        position: absolute;
        top: -45px;
        left: 0;
    }
    &-item{
        width: 190px;
        height: 63px;
        // background-size: 100% 100%;
        background-image: url('@/assets/images/anbao/bg_qing.png')!important;
        background-repeat: no-repeat;
        background-position: 0 0;
        box-sizing: border-box;
        padding-left: 65px;
        line-height: 63px;
        position: absolute;
        &:nth-child(1){
            top: 30px;
            left: 0;
        }
        &:nth-child(2){
            background-image: url('@/assets/images/anbao/bg_zi.png')!important;
            bottom: 15px;
            left: 10px;
        }
        &:nth-child(3){
            background-image: url('@/assets/images/anbao/bg_cheng.png')!important;
            right: 12px;
            bottom: 0;
            width: 230px;
        }
        &:nth-child(4){
            background-image: url('@/assets/images/anbao/bg_lan.png')!important;
            top: 40px;
            right: 0;
            width: 200px;
        }
        &:nth-child(5){
            background-image: url('@/assets/images/anbao/bg_lv.png')!important;
            top: -10px;
            left: 130px;
        }
        &-title{
            color: #fff;
            font-size: 16px;
            margin-left: -16px;
            i{
                font-size: 20px;
                margin: 0 0 0 8px;
            }
        }
    }
}
</style>